<template>
  <div ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'ECharts',
  // 修复1：将props名称改为与父组件使用的一致（option）
  props: {
    option: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      if (this.$refs.chartRef) {
        // 确保先销毁可能存在的实例
        if (this.myChart) {
          this.myChart.dispose();
        }
        this.myChart = echarts.init(this.$refs.chartRef);
        this.setOption(this.option);
      }
    },
    // 修复2：添加显式的设置选项方法
    setOption(option) {
      if (this.myChart && option && Object.keys(option).length > 0) {
        this.myChart.setOption(option);
      }
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    // 修复3：添加刷新方法供外部调用
    refresh() {
      if (this.myChart) {
        this.myChart.resize();
        this.setOption(this.option);
      } else {
        this.initChart();
      }
    },
    getEchartsInstance() {
      return this.myChart; // 返回内部的 ECharts 实例
    }
  },
  watch: {
    option: {
      deep: true,
      handler(newOption) {
        // 只有当新选项有内容时才更新
        if (Object.keys(newOption).length > 0) {
          this.setOption(newOption);
        }
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  }
};
</script>

<style scoped>
</style>
